<template>
  <Page>
    <mc-loading :loading="false">
      <div style="margin: 50px">
        {{ $t("系统登录") }}
      </div>
      <el-form :model="form" label-width="120px">
        <el-form-item :label="$t('账号')">
          <el-input v-model="form.name" :placeholder="t('账号')" />
          <el-button @click="changeLanguage">切换</el-button>
        </el-form-item>
      </el-form>
      <Power power="ADD">
        <span :style="{ marginRight: '30px', display: 'block' }"
          >这是个权限</span
        ></Power
      >
      <Power power="ADD">这也是个权限</Power>
    </mc-loading>
  </Page>
</template>

<script  setup>
import { reactive } from "vue";
import { setLanguage, getLanguage, removeLanguage } from "Utils/cookies";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const form = reactive({
  name: "",
});

const changeLanguage = () => {
  if (!getLanguage()) {
    setLanguage("en");
  } else {
    removeLanguage();
  }
};
</script>
